<template>
  <div class="page-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>黑马面经运营后台</span>
      </div>
      <el-form ref="form" :rules="rules" label-position="top" label-width="80px" :model="user">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item class="form-operation" size="large">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    async login() {
      await this.$refs.form.validate();
      console.log('校验通过');
      this.$store.dispatch('user/login', this.user);
    },
    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>
<style scoped>
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F110e96ee-db3a-4eb1-bd18-5b7012be88f6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685936263&t=3f5e5e791385f4a6e08d6b00d67dc0ff");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box-card {
  width: 33%;
  border: 0;
}

::v-deep .el-card__header {
  background-color: #727cf5;
  text-align: center;
  color: #fff;
}

.form-operation {
  margin-bottom: 0;
  text-align: center;
}
</style>
